<template>
  <div class="order-product-table">
    <el-container class="order-product-table-box">
      <el-editable
        v-loading="loading"
        ref="editable"
        :data="tableData"
        :columns="columns"
        @selection-change="handleSelectionChange"
      >
        <template
          :slot="'default-' + certificateProp"
          slot-scope="scope">
          <div class="top">
            <el-tooltip
              v-if="isCertificateExpired(scope.row)&&showExpired"
              class="item"
              effect="dark"
              content="注册证已过期，点击查看详细信息"
              placement="top"
            >
              <el-button
                type="text text-danger"
                @click="queryCardDetail(scope.row)"
              >{{ scope.row[certificateProp] }}</el-button>
            </el-tooltip>
            <span v-else>{{ scope.row[certificateProp] }}</span>
          </div>
        </template>
      </el-editable>
      <!-- 注册证详情 -->
      <registration-detail
        :visible="cardDialogShow"
        @dialogClose="dialogClose"
        :card-id="cardId" />
    </el-container>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable'
import RegistrationDetail from '@/moduleComponents/common/detail/registrationDetail'
export default {
  name: 'OrderProductTable',
  components: { ElEditable, RegistrationDetail },
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    productData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    showExpired: {
      // 是否显示注册证过期
      type: Boolean,
      default: true
    },
    certificateProp: {
      type: String,
      default: 'certificateNo'
    }
  },
  data () {
    return {
      tableData: this.productData,
      cardDialogShow: false,
      cardId: ''
    }
  },
  watch: {
    productData: {
      handler (value) {
        this.$nextTick(() => {
          this.tableData = value
        })
      }
    }
  },
  methods: {
    isCertificateExpired (row) {
      // 判断该行注册证是否过期
      return true
    },
    queryCardDetail (row) {
      this.cardId = row.certificateId
      this.cardDialogShow = true
    },
    dialogClose () {
      this.cardDialogShow = false
    },
    handleSelectionChange (selection) {
      this.$emit('selectionChange', selection)
    }
  }
}
</script>

<style lang="less">
.order-product-table {
  .order-product-table-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
